<template>
  <n-modal
    :show="showModal"
    preset="dialog"
    :show-icon="false"
    title="详情"
    :style="{ width: '400px' }"
    positive-text="确认"
    @update:show="(value:boolean) => $emit('update:showModal', value)"
  >
    <div class="detail-content">
      <n-grid x-gap="12" y-gap="12" :cols="1">
        <n-gi> 任务名称：{{ detailDate.taskName }} </n-gi>
        <n-gi> 路径：{{ detailDate.taskUrl }} </n-gi>
        <n-gi> 参数：{{ detailDate.taskParam }} </n-gi>
        <n-gi> 请求方式：{{ detailDate.taskMethod }} </n-gi>
        <n-gi> 接收者：{{ detailDate.taskTo }} </n-gi>
        <n-gi> cron表达式：{{ detailDate.taskCron }} </n-gi>
        <n-gi> 任务描述：{{ detailDate.taskDesc }} </n-gi>
      </n-grid>
    </div>
  </n-modal>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    props: {
      showModal: {
        type: Boolean,
        default: false
      },
      detailDate: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    emits: ['update:showModal']
  })
</script>
<style lang="less" scoped>
  .detail-content {
    padding: 10px;
  }
</style>
